<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>产品报修</title>
    <link href="../../plugin/css/fonts/font-awesome.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../../plugin/weui/css/weui.min.css" />
    <link rel="stylesheet" href="../../plugin/weui/css/jquery-weui.min.css" />
    <link rel="stylesheet" href="../../plugin/mui/css/mui.min.css">
    <link rel="stylesheet" href="../../plugin/layui/css/layui.css" media="all">
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="../../plugin/mui/css/app.css"/>
    <link rel="stylesheet" type="text/css" href="../css/global.css"/>
    <title> canvas手写签名 </title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            background-color: #FFFFFF;
        }
        h1 {
            text-align: center;
        }
        #canvasId {
            border: 1px solid #c2c1c1;
            height: 200px; width: 90%;
            margin:10px -5% 40px 5%;

        }
        .cell-item{
            border-bottom: none;
        }
        .button {
            width: 100px;
            height: 40px;
        }
        .cell-left{
            font-size: 14px;
            color: #A2A2A2;
                  padding-left: 5%;
        }
        .cell-right{
            font-size: 14px;
            color: black;
           height: 0px;
            margin-bottom: 0px;
        }
        input.cell-right{
            font-size: 14px;
            padding-left: 10px;
        }
        .button{
            float: right;
        }
		.cell-left {
			width: 32%;
		}
    </style>
</head>
<body >
<div class="m-cell" style="padding-top: 20px">
    <div class="cell-item">
        <div class="cell-left">产品名</div>
        <input class="cell-right" type="text" id="productName" />
    </div>
    <div id="sparepartFees">

    </div>
    <div class="cell-item">
        <div class="cell-left">零配件费(元)</div>
        <input class="cell-right" type="text" id="sparepartFee" disabled="disabled"/>
    </div>
    <div class="cell-item">
        <div class="cell-left">维修费(元)</div>
        <input class="cell-right" type="text" id="repairFee" disabled="disabled" />
    </div>
    <div class="cell-item">
        <div class="cell-left">上门服务费(元)</div>
        <input class="cell-right" type="text" id="doorToDoorFee" disabled="disabled" />
    </div>
    <div class="cell-item">
        <div class="cell-left">总计(元)</div>
        <input class="cell-right" type="text" id="totalFee" disabled="disabled" />
    </div>
</div>
<input type="file" style="display: none;" id="signFile" />
<canvas id="canvasId"></canvas><br />
<!--<input type="button" value="清除" class="button" onclick="hw.clear();" />-->
<footer class="footer" id="submitbill">
    	<button type="button" id="submitSign" class="mui-col-xs-12 mui-btn-outlined mui-btn-primary mui-btn register" style="font-size: 18px;margin-top: 10px">
           	确认
        </button>
</footer>
<!--<input type="button" value="清除最后一笔" class="button" onclick="hw.historyBack();" />-->
<script type="text/javascript">
	
	var canvas = document.getElementById("canvasId");
	var context = canvas.getContext("2d");
	context.fillStyle = "#ffffff";
	context.fillRect(-10,-10,500,200);
    function Handwriting(id) {
        this.canvas = document.getElementById(id);
        this.ctx = this.canvas.getContext("2d");
        this.ctx.fillStyle = "#000000";
        this.canvas.addEventListener("touchstart", this.downEvent.bind(this), false);
        this.canvas.addEventListener("touchmove", this.moveEvent.bind(this), false);
        this.canvas.addEventListener("touchend", this.upEvent.bind(this), false);
        this.canvas.addEventListener("contextmenu", function(e){ e.preventDefault() }, false);
        //this.canvas.onmousedown = this.downEvent.bind(this);
        //this.canvas.onmousemove = this.moveEvent.bind(this);
        //this.canvas.onmouseup = this.upEvent.bind(this);
        //this.canvas.onmouseout = this.upEvent.bind(this);
        this.moveFlag = false;
        this.upof = {};
        this.radius = 0;
        this.has = [];
        this.startOf = null;
        this.lineMax = 3;
        this.lineMin = 3;
        this.linePressure = 1;
        this.smoothness = 80;
        this.history = [];
    }

//  Handwriting.prototype.clear = function () {
//      this.history = [];
//      this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);
//  }
//
//  Handwriting.prototype.historyBack = function () {
//      this.history.pop();
//      this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);
//      for (var i = 0; i < this.history.length; i++) {
//          var h = this.history[i];
//          for (var j = 0; j < h.length; j+=3) {
//              this.ctx.beginPath();
//              this.ctx.arc(h[j],h[j+1],h[j+2],0,2*Math.PI,true);
//              this.ctx.fill();
//          }
//      }
//  }

    Handwriting.prototype.downEvent = function (e) {
        this.moveFlag = true;
        this.has = [];
        this.history.push([]);
        this.upof = this.getXY(e);
        this.startOf = this.upof;
    }

    Handwriting.prototype.moveEvent = function (e) {
        if (!this.moveFlag)
            return;
        e.preventDefault();
        var of = this.getXY(e);
        var up = this.upof;
        var ur = this.radius;
        this.has.unshift({time:new Date().getTime() ,dis:this.distance(up,of)});
        var dis = 0;
        var time = 0;
        for (var n = 0; n < this.has.length-1; n++) {
            dis += this.has[n].dis;
            time += this.has[n].time-this.has[n+1].time;
            if (dis>this.smoothness)
                break;
        }
        var or = Math.min(time/dis*this.linePressure+this.lineMin , this.lineMax) / 2;
        this.radius = or;
        this.upof = of;
        if (dis<7)
            return;
        if (this.startOf) {
            up = this.startOf;
            ur = or;
            this.startOf = null;
        }
        var len = Math.ceil(this.distance(up,of)/2);
        for (var i = 0; i < len; i++) {
            var x = up.x + (of.x-up.x)/len*i;
            var y = up.y + (of.y-up.y)/len*i;
            var r = ur + (or-ur)/len*i;
            this.ctx.beginPath();
            this.ctx.arc(x,y,r,0,2*Math.PI,true);
            this.ctx.fill();
            this.history[this.history.length-1].push(x,y,r);
        }
    }

    Handwriting.prototype.upEvent = function (e) {
        this.moveFlag = false;
    }

    Handwriting.prototype.getXY = function (e) {
        var x = e.touches[0].clientX;
        var y = e.touches[0].clientY;
        //var x = e.clientX;
        //var y = e.clientY;
        return {
            x : x - this.canvas.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft),
            y : y - this.canvas.offsetTop  + (document.body.scrollTop || document.documentElement.scrollTop)
        }
    }

    Handwriting.prototype.distance = function (a,b) {
        var x = b.x-a.x , y = b.y-a.y;
        return Math.sqrt(x*x+y*y);
    }

    var hw = new Handwriting("canvasId");
    hw.lineMax = 3;
    hw.lineMin = 2;
    hw.linePressure = 1.1;
    hw.smoothness = 100;
</script>
<script src="../../plugin/jquery/jquery-2.2.3.min.js"></script>
<script src="../../plugin/vue/vue.min.js"></script>
<script src="../../plugin/weui/js/jquery-weui.min.js"></script>
<script src="../../plugin/mui/js/mui.min.js"></script>
<script src="../../plugin/tencent/cos-js-sdk-v5.min.js"></script>
<script src="../../plugin/layui/layui.js" charset="utf-8"></script>

<script src="../../common/server.js"></script>
<script src="../../common/common.js"></script>
<script src="../js/sign.js"></script>
</body>
</html>